<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片旋转</title>
</head>
<body>
<canvas id="canvas" width="720" height="800" style="border: 1px solid #000"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const img  = new Image();
  img.addEventListener('load', () => {
    ctx.save();
    /****直接进行旋转******/
    // ctx.rotate(90 * Math.PI / 180);
    // ctx.drawImage(img, 0, 0);
    // ctx.rotate(90 * Math.PI / 180);
    // ctx.drawImage(img, 0, 0);
    // ctx.rotate(90 * Math.PI / 180);
    // ctx.drawImage(img, 0, 0);
    const imgWidth = img.naturalWidth; // 图片宽度
    const imgHeight = img.naturalHeight; // 图片的高度
    const left = 250, top = 350; // 原始坐标
    ctx.translate(left, top);
    ctx.drawImage(img, 0, 0); // 原始图片
    ctx.restore();
    const diff = (imgHeight - imgWidth) / 2;
    ctx.translate(left - diff, top + diff); // 计算图片旋转后左上角的坐标
    ctx.drawImage(img, 0, 0);
    ctx.translate(imgHeight, 0); // 位移到90°之前的坐标
    ctx.drawImage(img, 0, 0);
    ctx.rotate(90 * Math.PI / 180); // 进行旋转
    ctx.drawImage(img, 0, 0);
  });
  img.src = '../img/009.jpeg';
</script>
</body>
</html>